<template>
	<div class='cont'>
	<view class="content">
		<view class="cu-bar mySearch">
			<view class="search-form round" style="margin: 0;padding: 0;">
				<input v-model="searchVal" type="text" placeholder=" 搜索" placeholder-style="text-align:center" placeholder-class='cuIcon-search'
				 style="text-align: center;" />
			</view>
		</view>
		<div style="height: 80rpx;"></div>
		<swiper class="screen-swiper" :class="dotStyle ? 'square-dot' : 'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500">
			<swiper-item v-for="(item, index) in swiperList" :key="index" @click="tohtml(item)">
				<image :src="item.image_url" mode="aspectFill" class="topImg"></image>
			</swiper-item>
		</swiper>
		<div class='list'>
			<div class='listItem' v-for='(item,index) in listData' :key='index' @click='toNext(item)'>
				<img :src="item.image" alt="" class='coverImg'>
				<div class='name'>{{item.name}}</div>
			</div>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
			<i></i>
		</div>
		<div style='height: 100rpx;'></div>
	</view>
	<!-- <TabBar></TabBar> -->
	</div>
</template>

<script>
	// import TabBar from '@/components/TabBar.vue'
	export default {
		data() {
			return {
				swiperList: [],
				dotStyle: false,
				searchVal: '',
				listData: [],
				page_index:1,
				page_num:18,
				count:0
			};
		},
		components: {
			// TabBar,
		},
		
		onLoad() {},
		onShow() {
			//console.log('book执行了onShow');
			
		},
		watch: {
			searchVal(val) {
				this.page_index=1
				this.listData=[]
				this.getBooks()
				//console.log('val==', val)
			},
		},
		mounted() {
			//console.log('book执行了mounted');
			// uni.setStorageSync('token', 'f239d0d31b934bfc915cd60bafda92cd');
			this.init()
		},
		onHide() {
			//console.log('book执行了onHide');
		},
		beforeDestroy() {
			//console.log('book执行了beforeDestroy');
		},
		// onPageScroll(res) {
		//         //console.log('滚动',res)
		//     },
		onReachBottom() {
			//console.log(this.count/this.page_index)
			if (this.count/this.page_index>this.page_num) {
				this.page_index++;
				this.getBooks();
				//console.log('加载更多');
			} else {
				//console.log('没有更多了');
			}
		},
		methods: {
			init(){
				this.page_index=1
				this.page_num=18
				this.listData=[]
				this.count=0
				this.getBooks()
				this.getBanner()
				},
			getMore(){
				//console.log(this.count/this.page_index)
				if (this.count/this.page_index>this.page_num) {
					this.page_index++;
					this.getBooks();
					//console.log('加载更多');
				} else {
					//console.log('没有更多了');
				}
			},
			getBooks() {
				let _this = this;
				_this.uniRequest({
					url: `/books/home_page`,
					method: 'post',
					data:{
						name:_this.searchVal,
						page_index:_this.page_index,
						page_num:_this.page_num
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.listData =this.listData.concat(res.data.books) ;
							this.count=res.data.count
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			getBanner() {
				let _this = this;
				_this.uniRequest({
					url: `/banner`,
					method: 'post',
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.swiperList = res.data;
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			tohtml(item) {
				if(item.jump_type!=0){
					window.location.href=item.jump_url
				}
				//console.log('tohtml==', item)
			},
			toNext(item) {
				uni.navigateTo({
					url: `/pages/book/details?id=${item.id}`
				});
				//console.log('tohtml==', item)
			},
		}
	};
</script>

<style lang="less" scoped>
	// .cont {
	// 	margin: 0;
	// 	padding: 0;
	// 	background-color: white;
	// 	width: 100vw;
	// 	height: 100vh;
	// 	position: relative;
	// }
	
	.content {
	background-color: white;
	width: 100vw;
	min-height: 100vh;
	position: absolute;
	top: 0;
	overflow: auto;
background-color: #ece8e5;
		.mySearch {
			height: 76rpx;
			position: fixed;
			top: 0;
			left: 0;
			background-color: white;
			width: 100%;
			z-index: 99;
			padding: 32rpx;
			background-color: #fffaf0;
		}

		// 下面是轮播图
		.tower-swiper .tower-item {
			transform: scale(calc(0.5 + var(--index) / 10));
			margin-left: calc(var(--left) * 100upx - 150upx);
			z-index: var(--index);
		}

		.screen-swiper {
			margin: 32rpx;
			min-height: 36vw;
			height: 36vw;
		}

		.topImg {
			height: 36vw;
			border-radius: 30rpx;
			z-index: 999;
			position: relative;
		}

		//书架
		.list {
			padding: 0 32rpx 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.listItem {
				width: 208rpx;
				display: inline-block;
				text-align: center;
				vertical-align: top;
				padding-top: 32rpx;
				margin: 0;

				.coverImg {
					width: 208rpx;
					height: 268rpx;
					border-radius: 12rpx;
				}

				.name {
					width: 208rpx;
					font-size: 26rpx;
					color: #181E27;
					line-height: 36rpx;
					font-weight: normal;

					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}

			>i {
				width: 208rpx;
			}
		}
	}
</style>
